<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  
  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  
</head>
<body>

  <div class="page-group">
    <div class="page page-current">
      
      <header class="bar bar-nav fs-header-small">
        <a href="${ctx.host}/investigations" class="icon icon-left pull-left"></a>
        <h1 class="title">身体数据调查</h1>
      </header>
      
      <div class="content" style="top: 2.2rem;">
        <h3 class="text-center" style="background-color: #FFFAE1; margin: 0px; line-height: 2rem;">身体数据</h3>
        
        <form action="#" method="POST">
          
          <input type="hidden" name="_method" value="PATCH">
          
          <div class="list-block" style="margin-top: 0px; boder-top: 0px;">
            <ul class="form-body" style="border: 0px;">
              <!-- <c:if test="${empty userFit.height or empty userFit.weight}"> -->
                <li>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label">身高(cm):</div>
                      <div class="item-input">
                          <input name="height" type="number" placeholder="请输入整数(cm)" value="${userFit.height}">
                      </div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label">体重(kg):</div>
                      <div class="item-input">
                          <input name="weight" type="number" placeholder="请输入整数(kg)" value="${userFit.weight}">
                      </div>
                    </div>
                  </div>
                </li>
              <!-- </c:if> -->
              
              <li>
                <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title label">年龄(岁):</div>
                      <div class="item-input">
                          <input name="age" type="number" placeholder="请输入年龄(岁)" value="${userFit.age}">
                      </div>
                    </div>
                </div>
              </li>
              <li>
                <div class="item-content item-link">
                  <div class="item-inner" style="padding:0;">
                    <div class="item-title label">性别:</div>
                    <div class="item-input">
                      <input name="genderSelector" type="text" placeholder="请选择性别" class="gender-picker gender" value="${userFit.gender == null ? '男' : userFit.gender.description}" style="padding:1.5rem;">
                      <input type="hidden" name="gender" value="${userFit.gender == null ? 'MALE' : userFit.gender}">
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <div class="select-shape">
              <p style="margin-top: 0px; font-size: .7rem;">现在的体型:</p>
              <div class="shape-male ${userFit.gender == null ? '': userFit.gender == 'MALE' ? '' : 'hide'}">
                <c:forEach var="shape" items="${persist.shapes['male']}">
                  <img src="${shape.image}" data-shape="${shape.id}" class="${userFit.shape.id == shape.id ? 'active' : ''}">
                </c:forEach>
              </div>
              <div class="shape-female ${userFit.gender == 'FEMALE' ? '' : 'hide'}">
                <c:forEach var="shape" items="${persist.shapes['female']}">
                  <img src="${shape.image}" data-shape="${shape.id}"  class="${userFit.shape.id == shape.id ? 'active' : ''}">
                </c:forEach>
              </div>
              <input type="hidden" name="shapeId" value="${userFit.shape.id}">
              <c:if test="${not empty userFit.height and not empty userFit.weight}">
                <input name="height" type="hidden" value="${userFit.height}">
                <input name="weight" type="hidden" value="${userFit.weight}">
              </c:if>
            </div>
            
            <div class="bmi-box">
              <span>BMI:</span><input type="text" name="bmiValue" readonly placeholder="您的身体BMI值" value="${userFit.bmiValue}">
            </div>
          </div>
          <div class="content-block">
            <a  href="javascript:void(0);" class="button button-big buttom-filled button-next button-submit">提交</a>
          </div>
          
        </form>
        
      </div>
      
    </div>
  </div>
  
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/profile/investigation/fit-edit.js" />
  <script type="text/javascript">
    var jsConfig = JSON.parse('${wechatJsConfig}')
    require(['page/profile/investigation/fit-edit'], function(page) {
      page.init({
        jsConfig: jsConfig
      })
    })
  </script>
</body>
</html>